<template>
	<el-dialog
		:title="title"
		:visible.sync="addComShow"
		width="50%"
		:before-close="cancel"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
	>
		<el-form label-width="150px">
			<!-- 任职 -->
			<el-form-item label="基金名称" required>
				<el-select v-model="form.fundFullName" disabled>
					<el-option label="区域一" value="shanghai"></el-option>
					<el-option label="区域二" value="beijing"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="投资经理名称" required>
				<el-select v-model="form.managerName" disabled>
					<el-option label="区域一" value="shanghai"></el-option>
					<el-option label="区域二" value="beijing"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="投资经理职务类型">
				<el-select v-model="form.managerJobType" :disabled="['查看'].includes(title)" filterable clearable>
					<el-option v-for="(item, index) in enumList" :key="index + 'zhiwu'" :label="item.typeName" :value="item.typeCode"> </el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="基金变更历史名称">
				<el-input :disabled="['查看'].includes(title)" v-model="form.fundChangeHistory" @input="refresh"></el-input>
			</el-form-item>
			<el-form-item label="任职日期" required>
				<el-date-picker
					type="date"
					:disabled="['查看'].includes(title)"
					placeholder="选择日期"
					value-format="yyyy-MM-dd"
					format="yyyy-MM-dd"
					v-model="form.startDate"
				></el-date-picker>
			</el-form-item>
			<el-form-item label="离职日期">
				<el-date-picker
					type="date"
					:disabled="['查看'].includes(title)"
					placeholder="选择日期"
					value-format="yyyy-MM-dd"
					format="yyyy-MM-dd"
					v-model="form.endDate"
				></el-date-picker>
			</el-form-item>
			<!-- <el-form-item label="总办会批复时间">
				<el-date-picker
					type="date"
					:disabled="['查看'].includes(title)"
					placeholder="选择日期"
					value-format="yyyy-MM-dd"
					format="yyyy-MM-dd"
					v-model="form.generalMeetingReplyDate"
				></el-date-picker>
			</el-form-item> -->
			<!-- <el-form-item label="任职公告时间">
				<el-date-picker type="date" :disabled="['查看'].includes(title)" placeholder="选择日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" v-model="form.entryNoticeDate"></el-date-picker>
			</el-form-item> -->
			<!-- <el-form-item label="离职公告时间">
				<el-date-picker type="date" :disabled="['查看'].includes(title)" placeholder="选择日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" v-model="form.leaveNoticeDate"></el-date-picker>
			</el-form-item> -->
			<!-- <el-form-item label="流程开始时间">
				<el-date-picker
					type="date"
					:disabled="['查看'].includes(title)"
					placeholder="选择日期"
					value-format="yyyy-MM-dd"
					format="yyyy-MM-dd"
					v-model="form.workflowStartDate"
				></el-date-picker>
			</el-form-item> -->

			<!-- <el-form-item label="任职上报董事会时间">
				<el-date-picker
					type="date"
					:disabled="['查看'].includes(title)"
					placeholder="选择日期"
					value-format="yyyy-MM-dd"
					format="yyyy-MM-dd"
					v-model="form.entryReportBodDate"
				></el-date-picker>
			</el-form-item> -->
			<!-- <el-form-item label="任职董事会决议时间">
				<el-date-picker
					type="date"
					:disabled="['查看'].includes(title)"
					placeholder="选择日期"
					value-format="yyyy-MM-dd"
					format="yyyy-MM-dd"
					v-model="form.entryBodResolutionDate"
				></el-date-picker>
			</el-form-item> -->
			<!-- <el-form-item label="任职报送时间">
				<el-date-picker
					type="date"
					:disabled="['查看'].includes(title)"
					placeholder="选择日期"
					value-format="yyyy-MM-dd"
					format="yyyy-MM-dd"
					v-model="form.entrySubmittedDate"
				></el-date-picker>
			</el-form-item> -->
			<!-- <el-form-item label="任职协会批复时间">
				<el-date-picker
					type="date"
					:disabled="['查看'].includes(title)"
					placeholder="选择日期"
					value-format="yyyy-MM-dd"
					format="yyyy-MM-dd"
					v-model="form.entrySocietyReplyDate"
				></el-date-picker>
			</el-form-item> -->
			<el-form-item label="任职扫描件">
				<div class="upcalss">
					<el-upload
						v-if="!['查看'].includes(title)"
						class="upload-demo"
						action="https://jsonplaceholder.typicode.com/posts/"
						:before-remove="delFile"
						:limit="2"
						:http-request="toUploadFile"
						:on-exceed="handleExceed"
						:on-change="getValChangeyes"
						:on-preview="handlePreviewyes"
						:show-file-list="true"
						:file-list="fileList"
					>
						<el-button size="mini" v-show="!['查看'].includes(title)" type="primary" @click="beforeUpdate('任职')">点击上传</el-button>
					</el-upload>
					<el-button
						size="mini"
						:style="['查看'].includes(title) ? '' : 'margin-left:90px;'"
						class="ckakan"
						type="primary"
						@click="hooks(form.entryScanPiece)"
						v-show="!!form.entryScanPiece"
						>查看</el-button
					>
				</div>
			</el-form-item>
			<!-- <el-form-item label="离职上报董事会时间">
				<el-date-picker
					type="date"
					:disabled="['查看'].includes(title)"
					placeholder="选择日期"
					value-format="yyyy-MM-dd"
					format="yyyy-MM-dd"
					v-model="form.leaveReportBodDate"
				></el-date-picker>
			</el-form-item> -->
			<!-- <el-form-item label="离职董事会决议时间">
				<el-date-picker
					type="date"
					:disabled="['查看'].includes(title)"
					placeholder="选择日期"
					value-format="yyyy-MM-dd"
					format="yyyy-MM-dd"
					v-model="form.leaveBodResolutionDate"
				></el-date-picker>
			</el-form-item> -->
			<!-- <el-form-item label="离职报送时间">
				<el-date-picker
					type="date"
					:disabled="['查看'].includes(title)"
					placeholder="选择日期"
					value-format="yyyy-MM-dd"
					format="yyyy-MM-dd"
					v-model="form.leaveSubmittedDate"
				></el-date-picker>
			</el-form-item> -->
			<!-- <el-form-item label="离职协会批复时间">
				<el-date-picker
					type="date"
					:disabled="['查看'].includes(title)"
					placeholder="选择日期"
					value-format="yyyy-MM-dd"
					format="yyyy-MM-dd"
					v-model="form.leaveSocietyReplyDate"
				></el-date-picker>
			</el-form-item> -->
			<el-form-item label="离职扫描件">
				<div class="upcalss">
					<el-upload
						v-if="!['查看'].includes(title)"
						class="upload-demo"
						action="https://jsonplaceholder.typicode.com/posts/"
						:before-remove="delFile2"
						:limit="2"
						:http-request="toUploadFile2"
						:on-exceed="handleExceed"
						:show-file-list="true"
						:on-change="getValChangeno"
						:on-preview="handlePreviewno"
						:file-list="fileList2"
					>
						<el-button size="mini" v-show="!['查看'].includes(title)" type="primary" @click="beforeUpdate('免职')">点击上传</el-button>
					</el-upload>
					<el-button
						size="mini"
						:style="['查看'].includes(title) ? '' : 'margin-left:90px;'"
						class="ckakan"
						type="primary"
						@click="hooks(form.leaveScanPiece)"
						v-show="!!form.leaveScanPiece"
						>查看</el-button
					>
				</div>
			</el-form-item>
			<el-form-item label="备注">
				<el-input type="textarea" v-model="form.remarks" :disabled="['查看'].includes(title)"></el-input>
			</el-form-item>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button size="small" @click="cancel">取 消</el-button>
			<el-button size="small" type="primary" @click="addConfirm" :disabled="['查看'].includes(title)">确 定</el-button>
		</span>
	</el-dialog>
</template>
<script>
import { editHrFundManager } from '@/api/productApi/fundManager'
import { uploadFileAndSort, openFile, downloadFile } from '@/api/productApi/file'
import { timerConversion } from '@/utils/timer'
export default {
	props: {
		title: {
			type: String,
			default: ''
		},
		addComShow: {
			type: Boolean,
			default: false
		},
		comIsShow: {
			type: Function,
			default: Function
		},
		enumList: {
			type: Array,
			default: Array
		},
		queryFundManagerList: {
			type: Function,
			default: Function
		}
	},
	data() {
		return {
			fileList: [],
			fileList2: [],
			form: {},
			updateMsg: '',
			timerList: [
				'startDate',
				'endDate',
				'generalMeetingReplyDate',
				'entryNoticeDate',
				'leaveNoticeDate',
				'workflowStartDate',
				'entryReportBodDate',
				'entryBodResolutionDate',
				'entrySubmittedDate',
				'entrySocietyReplyDate',
				'leaveReportBodDate',
				'leaveBodResolutionDate',
				'leaveSubmittedDate',
				'leaveSocietyReplyDate'
			]
		}
	},
	mounted() {},
	methods: {
		hooks(id) {
			openFile(id)
		},
		handleExceed(files, fileList) {
			this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
		},
		// 删除任职文件
		delFile: function() {
			const file = { fileName: '' }
			this.form.fileList = file
			this.form.entryScanPiece = ''
		},
		// 删除任免职文件
		delFile2: function() {
			const file = { fileName: '' }
			this.form.fileList2 = file
			this.form.leaveScanPiece = ''
		},
		beforeUpdate(type) {
			this.updateMsg = type
		},
		toUploadFile(params) {
			uploadFileAndSort(params).then(res => {
				if (res.msgCode === 'Y') {
					this.form.entryScanPiece = res.obj
					this.form.fileList = { fileName: params.file.name, fileId: res }
				}
			})
		},
		// 任职下载
		handlePreviewyes(file) {
			downloadFile({ fid: this.form.entryScanPiece }).then(item => {
				if (item.msgCode === 'N') {
					this.$message({ showClose: true, message: '文件不存在', type: 'error' })
					return
				}
				if (item) {
					window.open(`/update/download.do?fid=${this.form.entryScanPiece}`)
				}
			})
		},
		// 免职下载
		handlePreviewno(file) {
			downloadFile({ fid: this.form.leaveScanPiece }).then(item => {
				if (item.msgCode === 'N') {
					this.$message({ showClose: true, message: '文件不存在', type: 'error' })
					return
				}
				if (item) {
					window.open(`/update/download.do?fid=${this.form.leaveScanPiece}`)
				}
			})
		},
		// 文件值改变时触发 change事件
		getValChangeyes(file, fileList) {
			if (fileList.length > 0) {
				this.fileList = [fileList[fileList.length - 1]]
			} else {
				this.fileList = fileList[0]
			}
		},
		// 文件值改变时触发 change事件
		getValChangeno(file, fileList) {
			if (fileList.length > 0) {
				this.fileList2 = [fileList[fileList.length - 1]]
			} else {
				this.fileList2 = fileList[0]
			}
		},
		toUploadFile2(params) {
			uploadFileAndSort(params).then(res => {
				if (res.msgCode === 'Y') {
					this.form.leaveScanPiece = res.obj
					this.form.fileList2 = { fileName: params.file.name, fileId: res }
				}
			})
		},
		cancel() {
			this.$emit('comIsShow')
			this.fileList = []
			this.fileList2 = []
		},
		// 新增或编辑
		addConfirm() {
			if (this.title === '查看') {
				this.cancel()
			} else if (this.title === '修改') {
				if (!!this.form.fundFullName && !!this.form.managerName && !!this.form.startDate) {
					const data = timerConversion(2, JSON.parse(JSON.stringify(this.form)), this.timerList)
					const listKey = Object.keys(data)
					listKey.forEach(item => {
						data[item] = data[item] ? data[item] : ''
					})
					editHrFundManager(data).then(res => {
						if (res.msgCode === 'Y') {
							this.cancel()
							this.$message({ type: 'success', message: res.msg })
							this.$emit('queryFundManagerList')
						}
					})
				} else {
					this.$message({ type: 'warning', message: '必填字段缺失，请确认' })
				}
			}
		},
		refresh: function() {
			this.$forceUpdate()
		},
		edit(obj) {
			this.form = timerConversion(1, JSON.parse(JSON.stringify(obj)), this.timerList)
			this.form.fundManagerId = this.form._id ? this.form._id : ''
		}
	}
}
</script>
<style lang="scss" scoped src='./index.scss'>
</style>
